<template>
	<view class="container">
		<view class="header">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索视频" placeholder-class="placeholder" v-model="searchText" />
			</view>
			<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
				<view class="category-tags">
					<text class="category-tag" 
						v-for="tag in categories" 
						:key="tag.id"
						:class="{ active: activeCategory === tag.id }"
						@click="setCategory(tag.id)">
						{{ tag.name }}
					</text>
				</view>
			</scroll-view>
		</view>
		
		<scroll-view scroll-y class="video-list">
			<view class="video-item" v-for="video in filteredVideos" :key="video.id">
				<view class="video-cover" @click="playVideo(video)">
					<image :src="video.cover" mode="aspectFill" class="cover-image" />
					<view class="video-duration">{{ video.duration }}</view>
					<view class="play-icon">▶</view>
				</view>
				<view class="video-info">
					<text class="video-title">{{ video.title }}</text>
					<view class="video-meta">
						<view class="author">
							<image :src="video.author.avatar" class="author-avatar" mode="aspectFill" />
							<text class="author-name">{{ video.author.name }}</text>
						</view>
						<view class="stats">
							<text class="views">{{ video.views }}观看</text>
							<text class="likes">{{ video.likes }}赞</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="upload-btn" @click="uploadVideo">
			<text class="iconfont icon-upload"></text>
			<text>上传视频</text>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			searchText: '',
			activeCategory: 'all',
			categories: [
				{ id: 'all', name: '全部' },
				{ id: 'gameplay', name: '游戏实况' },
				{ id: 'guide', name: '攻略视频' },
				{ id: 'funny', name: '搞笑集锦' },
				{ id: 'highlight', name: '精彩时刻' }
			],
			videos: []
		}
	},
	computed: {
		filteredVideos() {
			let filtered = this.videos;
			
			if (this.searchText) {
				const searchLower = this.searchText.toLowerCase();
				filtered = filtered.filter(video => 
					video.title.toLowerCase().includes(searchLower)
				);
			}
			
			if (this.activeCategory !== 'all') {
				filtered = filtered.filter(video => video.categoryId === this.activeCategory);
			}
			
			return filtered;
		}
	},
	created() {
		this.generateMockData();
	},
	methods: {
		generateMockData() {
			// 生成10条模拟视频数据
			this.videos = Array(10).fill().map((_, index) => {
				const game = games[Math.floor(Math.random() * games.length)];
				const category = this.categories[Math.floor(Math.random() * this.categories.length)];
				
				return {
					id: `video_${index}`,
					title: this.getRandomTitle(),
					cover: game.game_banner,
					duration: this.getRandomDuration(),
					author: {
						name: this.getRandomName(),
						avatar: '/static/tiwen.gif'
					},
					views: Math.floor(Math.random() * 10000),
					likes: Math.floor(Math.random() * 1000),
					categoryId: category.id
				};
			});
		},
		getRandomTitle() {
			const titles = [
				'精彩操作集锦',
				'通关教学视频',
				'搞笑时刻合集',
				'Boss战攻略',
				'游戏体验分享'
			];
			return titles[Math.floor(Math.random() * titles.length)];
		},
		getRandomDuration() {
			const minutes = Math.floor(Math.random() * 10) + 1;
			const seconds = Math.floor(Math.random() * 60);
			return `${minutes}:${String(seconds).padStart(2, '0')}`;
		},
		getRandomName() {
			const names = ['游戏达人', '视频达人', '资深玩家', '主播', 'UP主'];
			return names[Math.floor(Math.random() * names.length)];
		},
		setCategory(categoryId) {
			this.activeCategory = categoryId;
		},
		playVideo(video) {
			uni.navigateTo({
				url: `/pages/community/content/video-detail?id=${video.id}`
			});
		},
		uploadVideo() {
			uni.navigateTo({
				url: '/pages/community/content/video-upload'
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
	padding-bottom: 80px;
}

.header {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #1E1E2E;
	border-radius: 20px;
	padding: 8px 15px;
	margin-bottom: 12px;
}

.search-bar input {
	flex: 1;
	margin-left: 8px;
	color: #9796B8;
	font-size: 14px;
}

.placeholder {
	color: #6E6C89;
}

.category-scroll {
	white-space: nowrap;
}

.category-tags {
	display: inline-flex;
	gap: 10px;
	padding: 4px 0;
}

.category-tag {
	padding: 4px 12px;
	border-radius: 15px;
	font-size: 14px;
	color: #6E6C89;
	background: #1E1E2E;
	white-space: nowrap;
}

.category-tag.active {
	background: #9796B8;
	color: #1E1E2E;
}

.video-item {
	background: #2D2D44;
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}

.video-cover {
	position: relative;
	width: 100%;
	height: 200px;
}

.cover-image {
	width: 100%;
	height: 100%;
}

.video-duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
}

.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
}

.video-info {
	padding: 12px;
}

.video-title {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 8px;
}

.video-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.author-avatar {
	width: 24px;
	height: 24px;
	border-radius: 12px;
}

.author-name {
	font-size: 14px;
	color: #6E6C89;
}

.stats {
	display: flex;
	gap: 12px;
	font-size: 12px;
	color: #6E6C89;
}

.upload-btn {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #9796B8;
	color: #1E1E2E;
	padding: 10px 25px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.iconfont {
	font-size: 16px;
	color: #6E6C89;
}

.upload-btn .iconfont {
	color: #1E1E2E;
}
</style> 